<template>
  <div class="user-avatar-dropdown">
    <Dropdown @on-click="handleClick">
      <Badge :dot="parseFloat($store.state.F_cat.messages)>0">
        <Avatar :src="$store.state.F_cat.userImg" style="border:1px solid #ccc;"/>
      </Badge>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list" >
        <DropdownItem name="message">
          预 警<Badge style="margin-left: 10px" :count="0"></Badge>
        </DropdownItem>
        <DropdownItem name="pTmessages">
          消息列表<Badge class="wocWQ" :count="$store.state.F_cat.messages"></Badge>
        </DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

.<style lang="less" >
.user-avatar-dropdown{
  .ivu-dropdown-menu{
    overflow: hidden;
    .ivu-dropdown-item{width:115%}
  }
  .wocWQ{
    position: relative;
    top:-10px;
    left:2px;
    .ivu-badge-count{
      min-width: 15px;
      height: 15px;
      padding: 0;
      line-height: 13px;
    }
  }
}

</style>

<script>
import './user.less'
export default {
  name: 'User',
  data() {
    let data = {};

    let tool={};
    return Object.assign(data, tool);
  },
  created(){
  },
  mounted(){
    this.topMessages();
  },
  methods: {
    //跟新右上角消息红圈
    topMessages(){
      // 获取数据 type流水类型,0全部, 1未读,2已读
      $ajax.pTmessages(1,15,1, resData => {
        this.$store.commit('upData_messages',resData.total);
      });
    },
    
    logout () {
      $app.confirm('退出当前账号？','温馨提示',{
        yesFun:()=>{
          $app.goLogin(true);
        }
      });
    },
    message () {
      let {
        $route:{
          name
        }
      }=this;
      if(name!='home'){
        this.$router.push({name: 'home'})
      }
      
    },
    pTmessages(){
      let {
        $route:{
          name
        }
      }=this;
      if(name!='pTmessages'){
        this.$router.push({name: 'pTmessages'})
      }
    },
    handleClick (name) {
      switch (name) {
        case 'logout': this.logout()
          break;
        case 'message': this.message()
          break;
        case 'pTmessages': this.pTmessages()
          break;
          
      }
    }
  }
}
</script>
